<template>
	<view class="systemMsg">
		<view class="item" v-for="(item, index) in sysMsgList" :key="index"
			:class="!item.hasOwnProperty('comment') ? 'aic' : ''">
            <up-image class="upImage" src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="90rpx" height="90rpx"
                            radius="50"></up-image>
			<view class="main">
				<text class="title" :style="!item.hasOwnProperty('comment') ? 'margin-top: 10rpx' : ''">{{item.title}}</text>
				<view class="content">
					<text class="text">{{item.content}}</text>
					<text>{{item.date}}</text>
				</view>
				<view class="comment" v-if="item.hasOwnProperty('comment')">
					<view class="verticalLink">
					</view>
					<text class="commentText">{{item.comment || ''}}</text>
				</view>

			</view>
			<view class="img" v-if="item.hasOwnProperty('url')">

			</view>
			<view class="handle" v-else :class="item.handle == '回关' ? 'bc1' : item.handle == '去看看' ? 'bc2' : 'bc3'">
				<text>{{item.handle || ''}}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	const sysMsgList = ([
		{ title: '张文婷', content: '赞了你的帖子', date: '23/03/10', url: '' },
		{ title: '张文婷', content: '攒了你的评论', date: '23/03/10', comment: '被赞的评论的内容', url: '' },
		{ title: '张文婷', content: '攒了你的评论', date: '23/03/10', comment: '被赞的评论的内容被赞的评论的内容被赞的评论的内容', url: '' },
		{ title: '张文婷', content: '收藏你的帖子', date: '23/03/10', url: '' },
		{ title: '张文婷', content: '关注了你', date: '23/03/10', handle: '回关' },
		{ title: '张文婷', content: '关注了你', date: '23/03/10', handle: '私信TA' },
		{ title: '发布的活动标题', content: '张文婷参加了你发布的活动', date: '23/03/10', handle: '去看看' }
	])
</script>

<style lang="scss" scoped>
	.systemMsg {
		display: flex;
		flex-direction: column;


		.aic {
			align-items: center;
		}

		.item {
			display: flex;
			flex-direction: row;
            margin: 0 20rpx ;
			padding: 20rpx 0;
            border-bottom: 1rpx solid #F5F5F5;

			.avatar,
			.img {
				min-width: 100rpx;
				height: 100rpx;
				background-color: #999;
				border-radius: 10rpx;
			}

			.main {
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				margin-left: 20rpx;
			}

			.handle {
				display: flex;
				align-items: center;
				border-radius: 30rpx;
				padding: 10rpx 25rpx;
				font-size: 28rpx;
			}

			.bc1 {
				color: #966BFF;
				border: 1rpx solid #966BFF;
				padding: 10rpx 40rpx;
			}

			.bc2 {
				color: #5084FF;
				border: 1rpx solid #5084FF;
			}

			.bc3 {
				color: #FA929D;
				border: 1rpx solid #FA929D;
			}
		}
	}

	.main {
		.title {
			font-size: 40rpx;
			margin-bottom: 8rpx;
		}

		.content {
			display: flex;
			flex-direction: row;
			color: #B1B1B1;
			font-size: 28rpx;
			margin-bottom: 17rpx;


			.text {
				margin-right: 20rpx;
				color: #707070;
				// max-width: 300rpx;
				// white-space: nowrap;
				// overflow: hidden;
				// text-overflow: ellipsis;
			}
		}

		.comment {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #B1B1B1;
			font-size: 25rpx;


			.verticalLink {
				width: 6rpx;
				height: 30rpx;
				margin-right: 10rpx;
				background-color: #E1E1E1;
				border-radius: 2rpx;
			}

            .commentText {
				max-width: 480rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

		}
	}
</style>